<template>
	<layout back>
		<view class="login" slot="medi">
			<view class="bjimg">
				<!-- #ifdef MP-WEIXIN -->
				<image src="static/loginBJ.png" mode=""></image>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<image src="../static/image/bjtp.jpg" mode=""></image>
				<!-- #endif -->
			</view>
			<view class="form">
				<uni-forms ref="form" :modelValue="formData" :rules="rules">
					<uni-forms-item label="账号" name="objId">
						<uni-easyinput type="text" v-model="formData.objId" placeholder="请输入用户名" />
					</uni-forms-item>
					<uni-forms-item label="密码" name="pwd">
						<uni-easyinput type="text" v-model="formData.pwd" placeholder="请输入邮箱" />
					</uni-forms-item>
				</uni-forms>

				<view class="check_div flex">
					<checkbox-group @change="checkChange">
						<label>
							<checkbox value="工程师" :checked="checked_show" /><text>工程师</text>
						</label>
						<label>
							<checkbox value="企业端" :checked="!checked_show" /><text>企业端</text>
						</label>
					</checkbox-group>
				</view>

				<view class="anniu">
					<button size="default" type="default" @click="submit">登陆</button>
				</view>

				<button style="display: inline-block;
						padding: 5px;
						background: #7aa8cd;
						color: #ffff;" @click="directLogin">+</button>
			</view>
			<uni-fab ref="fab" :pattern="pattern" horizontal="right" vertical="bottom" @fabClick="fabClick" />
		</view>
	</layout>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					"objId": "",
					"pwd": "",
					"address": "",
					"logintype": "", //B1为工程师端，D1为企业端
					"appid": "",
					"Linces": "fstorch"
				},
				rules: {
					objId: {
						rules: [{
							required: true,
							errorMessage: '账号不能为空',
						}]
					},
					pwd: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空',
						}]
					}
				},

				checked_show: true,
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff',
					icon: 'undo-filled'
				},
			}
		},
		methods: {
			directLogin() {
				if (uni.getStorageSync("ID")) {
					uni.navigateTo({
						url: '/pagesFstorch/clockIn'
					});
					return;
				} else {
					this.common.fun_hint('需要登录');
				}
			},
			submit() {

				this.$refs.form.validate().then(res => {
					const p_data = {
						...this.formData,
						...res
					}
					p_data.logintype = this.checked_show ? "B1" : "D1";
					this.getLogin(p_data);
					console.log('表单数据信息：', p_data);
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			getLogin(p_data) {
				uni.showLoading({
					title: '登录中……',
					mask: true
				})
				this.API.Login(p_data).then(e => {
					uni.hideLoading();
					const data = this.common.treating(e)
					console.log(data, '登陆结果')

					if (e.indexOf("Error:") != -1) {
						uni.showToast({
							title: '登陆失败',
							icon: 'error',
							duration: 2000
						});
					}
					if (data != null) {
						console.log(data, '登录信息');
						// 新增加的  登录信息中是否包含sqb_store_sn字段，若有内容，则不能进行师傅代缴
						if (data.sqb_store_sn) uni.setStorageSync('sqb_store_sn', data.sqb_store_sn);
						/**
						 * @param {string}  map_key 地图key
						 * @param {Number}  map_polltime 分钟数
						 * */
						uni.setStorageSync('map_key', data.map_key);
						uni.setStorageSync('map_polltime', data.map_polltime);

						uni.setStorageSync('gcsorQy', this.checked_show ? "工程师" : "企业端");
						// 2022-12-8 11:23:36 新加的字段
						uni.setStorageSync('homepage', data.homepage);
						uni.setStorageSync('ID', data.ID);
						uni.setStorageSync('phone', data.phone);
						uni.setStorageSync('deviceid', '');
						uni.setStorageSync('name', data.name);
						uni.setStorageSync('sex', data.sex);
						uni.setStorageSync('companyID', data.companyID);
						uni.setStorageSync('companyname', data.companyname || data.companyName);
						uni.setStorageSync('address', data.address);
						uni.setStorageSync('province', data.province);
						uni.setStorageSync('city', data.city);
						uni.setStorageSync('county', data.county);
						uni.setStorageSync('photo', data.photo);
						uni.setStorageSync('querycriteria', data.querycriteria || '');
						uni.setStorageSync('isLogin', "true");
						uni.setStorageSync('signtype', data.signtype);
						uni.setStorageSync('signvalues', data.signvalues);
						uni.setStorageSync('gzbm', data.gzbm);
						uni.setStorageSync('gzzw', data.gzzw);
						uni.setStorageSync('appkey', data.app_key || "");
						uni.setStorageSync('otherInfo', data.other_info);


						uni.navigateTo({
							url: '/pagesFstorch/clockIn'
						});
					} else {
						this.$refs.uToast.show({
							type: 'error',
							icon: true,
							message: "账号或密码错误!"
						});
					}

				})
			},
			//复选框的回调 e.detail = {value:[选中的checkbox的value的数组]}
			checkChange(e) {
				/**
				 * checked_show=true 为工程师  反之为企业端
				 * */
				this.checked_show = !this.checked_show;
			},
			fabClick(res) {
				uni.navigateBack();
				console.log(res, 'res');
			},

		}
	}
</script>

<style lang="less">
	.login {
		display: flex;
		height: 100vh;
		flex-direction: column;
		justify-content: center;
		position: relative;
		overflow: hidden;

		.bjimg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0px;
			left: 0px;
			bottom: 0px;
			right: 0px;
			z-index: 1;

			image,
			img {
				width: 100%;
				height: 100%;
			}
		}

		.form {
			background-color: #fff;
			padding: 15px 15px;
			box-sizing: border-box;
			text-align: center;
			border-radius: 15px;
			margin: 0px 20px;
			z-index: 10;

			.check_div {
				label {
					margin-right: 10px;
				}
			}
		}

		.anniu {
			margin: 15px 10px;
			box-sizing: border-box;

			button {
				padding: 10px;
				background: #03A9F4;
				color: #fff;
			}
		}
	}
</style>